<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>

    <style>
        img {
            height: 200px;
            /* float:脱离文档流 描述的标签脱离文档流显示 none 没有浮动 left居左 right 居右 inherit 继承父元素的float属性值*/
            float: left;
            margin-right: 20px;
        }

        .item {
            width: 800px;
            background-color: aquamarine;
            height: 200px;
            box-sizing: border-box;
            border: 2px solid black;
        }

        .text {
            /* 清除浮动 left 清除左侧浮动 right 清除右侧浮动 both 清除所有浮动 */
            clear: left;
        }

        .item-small {
            float: left;
            width: 25%;
            height: 100%;
            box-sizing: border-box;
            border-right: 2px solid black;
        }

        .item-small:nth-of-type(4) {
            border-right: none;
        }

        .img-box {
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="img-box">
        <img src="../images/pic.jpg" alt="">
        <p class="text">
            好美的一张图片呀，今天小多要给大家分享一些好看的配色卡，它们最大的特点就是色彩十分温柔！相信大多数女性设计师会很喜欢这类颜色。你以为说到这里，男性设计师们就可以滑过不看了吗？当然不可能啦，千万别忘了现在的主流消费可是女性和婴儿群体！

            这类柔和的颜色不管是用于食品包装、护肤品包装、还是婴儿物品包装都是非常适用的。对于食品而言，柔和的色彩增加了几分美味、甜味；对于护肤品而言，会让整体看起来更加温和安全、高端；对于婴儿物品而言，会让人感觉更加柔软。

            话不多说，一起来欣赏这些配色卡吧~</p>
    </div>

    <div class="item">
        <div class="item-small"></div>
        <div class="item-small"></div>
        <div class="item-small"></div>
        <div class="item-small"></div>
    </div>
</body>

</html>